import React, { useState, useEffect } from 'react';
import { useStore } from '@/hooks'
import { observer } from 'mobx-react-lite';
import { column, toSelectDataSource, ENUMS } from '../stores/definitions_logs';
import TauTable from '@/components/TauTable';
import { t } from '@lingui/macro';
import { uniqueId } from 'lodash';
import TauPage from '@/components/TauPage';
import TauActionPanel from '@/components/TauActionPanel';

const tableId = uniqueId('tauTable-');

const Logs = ({ modal }) => {
  const { record } = modal || {};
  const { memberStore: store } = useStore();

  useEffect(() => {
    return () => {
      store.logs = [];
    };
  }, []);

  // 获取列表数据
  const handleOnSearch = (params) => {
    const { getOnDate, type, ...searchArgs } = params.values;
    const [from, to] = getOnDate || [];
    store.logs_search = {
      from,
      to,
      targetId: record?.id,
      args: {
        type: type || '',
      },
      ...searchArgs,
    };
  };

  return (
    <TauPage className="page-container">
      <TauActionPanel
        onSearch={handleOnSearch}
        actions={[
        ]}
        searchItems={
          [
            {
              name: 'getOnDate',
              type: 'date-range',
              props: {
                placeholder: [t`开始创建时间`, t`结束创建时间`],
              },
            },
            {
              name: 'type',
              type: 'select',
              props: {
                dataSource: toSelectDataSource(ENUMS.type),
                placeholder: t`类型`,
                style: { width: 160 },
              },
            },
          ]}
        keywordSearch={{
          // enabled: true,
          placeholder: t`请输入关键字搜索`,
        }}
        className="action-panel"
      />
      <div className="content">
        <div className="content">
          <TauTable
            instanceId={tableId}
            primaryKey="id"
            tableLayout="fixed"
            currentPage={store.logs_pg.page}
            pageSize={store.logs_pg.size}
            total={store.logs_total}
            onFetch={(pg) => { store.logs_pg = pg; }}
            loading={store.loading_logs}
            dataSource={toJS(store.logs)}
            columns={[
              { title: t`序号`, dataIndex: 'idx', width: 44, cell: (v, i) => store.idx(i) },
              column('args.type', { width: 100 }),
              column('title', { width: 188 }),
              column('args.point', { width: 100 }),
              column('ts', { width: 88 }),
            ]}
          />
        </div>
      </div>
    </TauPage>
  );
};

export default observer(Logs);
